<template>
    <Header></Header>
            <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">
                <div class="mb-3 w-full font-medium p-5 bg-white rounded-lg dark:bg-[#111828]">
                    <h2 class="mb-6 font-bold text-gray-900 text-2xl dark:text-white text-center ">分类</h2>
                    <p class="text-gray-600 dark:text-gray-400 text-center mb-10">心如花木--------皆向阳而生</p>
                    <div class="flex flex-wrap gap-6 justify-center">
                        <div 
                            @click="goCatagoryArticleListPage(item.id, item.name)" 
                            v-for="(item, index) in categories" 
                            :key="index"
                            class="flex flex-col items-center cursor-pointer group"
                        >
                            <!-- 圆形分类项 -->
                            <div class="w-29 h-30 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-lg transform transition-all duration-300 group-hover:scale-110 group-hover:shadow-xl drop-in-element" 
                                :style="{ animationDelay: index * 0.1 + 's' }">
                                <div class="w-30 h-30 rounded-full bg-white dark:bg-[#111828] flex items-center justify-center border-2 border-white dark:border-gray-700">
                                    <span class="text-lg font-bold text-gray-800 dark:text-white">{{ item.name.substring(0, 1) }}</span>
                                </div>
                            </div>
                            <!-- 分类名称 -->
                            <span class="mt-3 text-gray-700 dark:text-gray-300 font-medium group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300 drop-in-element" 
                                :style="{ animationDelay: index * 0.1 + 0.05 + 's' }">
                                {{ item.name }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import { useRouter } from 'vue-router'
import { getCategories } from '@/api/frontend/category'
import { ref } from 'vue'

const router = useRouter()

const goCatagoryArticleListPage = (id, name) => {
    router.push({ path: '/category/list', query: { id: id, name: name } })
}

const categories = ref([])
getCategories().then((e) => {
    if (e.success) {
        categories.value = e.data
    }
})
</script>

<style scoped>
.drop-in-element {
  animation: dropIn 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(-30px);
}

@keyframes dropIn {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  70% {
    opacity: 1;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>